<template>
  <view class="login-container">
    <!-- 背景图层 -->
    <image class="bg-image" src="https://i.ibb.co/DHSJKYzb/shouyebg.jpg" mode="aspectFill"></image>
    
    <!-- 半透明遮罩层 -->
    <view class="overlay"></view>
    
    <!-- 返回按钮 -->
    <view class="back-button" @tap="goBack">
      <image src="https://i.ibb.co/9m20f88T/ailvpai.jpg" mode="aspectFit" class="back-icon"></image>
    </view>
    
    <!-- 内容层 -->
    <view class="content-layer">
      <!-- 标题区域 -->
      <view class="login-title">
        <text class="main-title">AI旅行伴侣</text>
        <text class="subtitle-text">新如影旗下AI导游平台</text>
      </view>
      
      <!-- 授权登录区域 -->
      <view class="auth-login-area">
        <!-- 手机号授权登录按钮 -->
        <button 
          class="auth-login-btn" 
          :class="{ 'loading': loading }"
          open-type="getPhoneNumber" 
          @getphonenumber="onGetPhoneNumber"
          :disabled="!agreementChecked || loading"
        >
          <view class="auth-icon">
            <text class="icon-text">📱</text>
          </view>
          <text class="login-text">{{ loading ? loadingText : '微信登录' }}</text>
          <view v-if="loading" class="loading-spinner"></view>
        </button>
        
        <!-- 授权说明 -->
        <view class="auth-tips">
          <text class="tips-text">为了更好地为您提供服务，需要获取您的手机号进行身份验证</text>
        </view>
      </view>
      
      <!-- 用户协议 -->
      <view class="agreement-area">
        <view class="agreement-checkbox" @click="toggleAgreement">
          <view class="checkbox" :class="{ 'checked': agreementChecked }">
            <text v-if="agreementChecked" class="check-icon">✓</text>
          </view>
          <text class="agreement-text">
            我已阅读并同意
            <text class="link-text" @click.stop="showUserAgreement">《用户协议》</text>
            和
            <text class="link-text" @click.stop="showPrivacyPolicy">《隐私政策》</text>
          </text>
        </view>
      </view>
    </view>

    <!-- 提示弹窗 -->
    <view class="toast" v-if="toast.show">
      <text>{{ toast.message }}</text>
    </view>
  </view>
</template>

<script>
import { login, wxLogin } from '@/api/ai-trip/auth.js'
import { saveLoginInfo } from '@/utils/ai-trip/auth.js'

export default {
  layout: 'empty',
  data() {
    return {
      loading: false,
      loadingText: '登录中...', // 动态loading文本
      toast: {
        show: false,
        message: ''
      },
      agreementChecked: false // 用户协议勾选状态
    }
  },
  methods: {
    showToast(message, duration = 3000) {
      this.toast.message = message;
      this.toast.show = true;
      
      setTimeout(() => {
        this.toast.show = false;
      }, duration);
    },
    
    // 处理手机号授权
    async onGetPhoneNumber(e) {
      console.log('手机号授权回调:', e);
      
      // 检查是否同意用户协议
      if (!this.agreementChecked) {
        this.showToast('请先同意用户协议和隐私政策');
        return;
      }
      
      // 检查用户是否同意授权
      if (e.detail.errMsg !== 'getPhoneNumber:ok') {
        console.log('用户拒绝手机号授权:', e.detail.errMsg);
        this.showToast('需要手机号授权才能登录，请重新尝试');
        return;
      }
      
      // 检查是否获取到加密数据
      if (!e.detail.encryptedData || !e.detail.iv) {
        console.error('未获取到手机号加密数据');
        this.showToast('获取手机号信息失败，请重试');
        return;
      }
      
      this.loading = true;
      this.loadingText = '正在获取登录信息...';
      
      try {
        // 优化：在获取到手机号授权数据后立即获取新的code，确保code的新鲜度
        console.log('获取手机号授权成功，立即获取新的微信code');
        this.loadingText = '正在获取微信授权...';
        const code = await wxLogin();
        console.log('获取到新的微信code:', code);
        
        // 构建登录数据
        const loginData = {
          code: code,
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          userInfo: {} // 暂时不传用户信息
        };
        
        console.log('发送登录请求:', loginData);
        this.loadingText = '正在验证登录信息...';
        
        // 使用重试机制进行登录
        const result = await this.loginWithRetry(loginData, 3);
        console.log('服务器登录结果:', result);
        
        if (result.code === 200) {
          // 登录成功，保存基本信息
          this.loadingText = '登录成功，正在跳转...';
          saveLoginInfo(result.data);
          
          this.showToast('登录成功');
        
          // 延迟返回，让用户看到成功提示
          setTimeout(() => {
            this.loading = false;
            // 返回上一页
            uni.navigateBack({
              delta: 1,
              success() {
                console.log('登录成功，返回上一页');
              },
              fail(err) {
                console.error('返回失败', err);
                // 如果返回失败，跳转到首页
                uni.switchTab({
                  url: '/pages/index/index'
                });
              }
            });
          }, 1500);
          
        } else {
          // 登录失败，显示具体错误信息
          this.loading = false;
          this.loadingText = '登录中...'; // 重置loading文本
          this.handleLoginError(result);
        }
        
      } catch (error) {
        console.error('登录失败:', error);
        this.loading = false;
        this.loadingText = '登录中...'; // 重置loading文本
        
        // 处理网络错误或其他异常
        if (error.statusCode) {
          // HTTP错误
          this.showToast(`登录失败：${error.statusCode} 错误`);
        } else if (error.message && error.message.includes('重试次数')) {
          // 重试失败
          this.showToast('登录失败，请稍后重新尝试');
        } else if (error.message && error.message.includes('微信登录')) {
          // 微信登录相关错误
          this.showToast(error.message);
        } else {
          // 其他错误
          this.showToast('登录失败，请检查网络连接后重试');
        }
      }
    },
    
    /**
     * 带重试机制的登录方法
     * @param {Object} loginData 登录数据
     * @param {Number} maxRetries 最大重试次数
     * @returns {Promise} 登录结果
     */
    async loginWithRetry(loginData, maxRetries = 3) {
      let lastError = null;
      
      for (let i = 0; i < maxRetries; i++) {
        try {
          console.log(`第 ${i + 1} 次尝试登录`);
          
          // 如果是重试（非首次），重新获取code确保时效性
          if (i > 0) {
            console.log('重试登录，重新获取微信code');
            this.loadingText = `正在重试登录 (${i + 1}/${maxRetries})...`;
            const newCode = await wxLogin();
            loginData.code = newCode;
            console.log('重新获取到微信code:', newCode);
            
            // 重试间隔，避免过于频繁的请求
            this.loadingText = `重试中，请稍候...`;
            await this.sleep(1000 + i * 500); // 递增延迟：1s, 1.5s, 2s
            this.loadingText = `正在验证登录信息 (${i + 1}/${maxRetries})...`;
          }
          
          const result = await login(loginData);
          
          // 如果登录成功，直接返回结果
          if (result.code === 200) {
            console.log(`第 ${i + 1} 次尝试登录成功`);
            return result;
          }
          
          // 如果是手机号解密失败(4001)，可以重试
          // 其他业务错误(如4002手机号格式错误、4003手机号已绑定等)不应该重试
          if (result.code === 4001 && i < maxRetries - 1) {
            console.log(`第 ${i + 1} 次尝试失败(手机号解密失败)，准备重试`);
            lastError = new Error(result.message);
            continue;
          } else {
            // 非4001错误或已达到最大重试次数，直接返回结果
            console.log(`第 ${i + 1} 次尝试失败，错误码: ${result.code}，不再重试`);
            return result;
          }
          
        } catch (error) {
          console.error(`第 ${i + 1} 次尝试异常:`, error);
          lastError = error;
          
          // 如果是最后一次尝试，抛出错误
          if (i === maxRetries - 1) {
            break;
          }
          
          // 网络错误等异常情况可以重试
          console.log(`第 ${i + 1} 次尝试异常，准备重试`);
        }
      }
      
      // 所有重试都失败了
      throw new Error(`登录失败，已重试 ${maxRetries} 次。最后错误: ${lastError?.message || '未知错误'}`);
    },
    
    /**
     * 延迟函数
     * @param {Number} ms 延迟毫秒数
     * @returns {Promise} 
     */
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    
    // 处理登录错误
    handleLoginError(result) {
      const errorMessages = {
        4001: '手机号授权信息已过期，请重新点击"微信授权登录"按钮',
        4002: '手机号格式错误，请联系客服',
        4003: '该手机号已被其他微信账号绑定，请联系客服',
        4004: '该微信账号已绑定其他手机号，请联系客服',
        429: '', // 429 特殊处理
        400: '登录参数错误，请重试',
        500: '服务器错误，请稍后重试'
      };
      let message = '';
      if (result.code === 429) {
        // 尝试从 result.message 中提取秒数
        let match = result.message && result.message.match(/(\d+)秒/);
        let seconds = match ? match[1] : null;
        if (seconds) {
          message = `登录过于频繁，请${seconds}秒后重试`;
        } else {
          message = result.message || '登录过于频繁，请稍后重试';
        }
      } else {
        message = errorMessages[result.code] || result.message || '登录失败，请重试';
      }
      this.showToast(message);
    },
    
    // 切换用户协议勾选状态
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked;
    },
    
    // 显示用户协议
    showUserAgreement() {
      uni.showModal({
        title: '用户协议',
        content: '欢迎使用AI旅行伴侣！\n\n1. 本应用提供AI智能拍照服务\n2. 用户需遵守相关法律法规\n3. 不得上传违法违规内容\n4. 我们保护用户隐私安全\n5. 服务条款可能随时更新\n\n我们需要获取您的手机号用于：\n- 用户身份验证\n- 账号安全保护\n- 重要通知推送',
        showCancel: false,
        confirmText: '我知道了'
      });
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '我们非常重视您的隐私保护：\n\n1. 我们只收集必要的用户信息\n2. 不会向第三方泄露您的个人信息\n3. 您的照片数据仅用于AI处理\n4. 您可以随时删除个人数据\n5. 如有疑问请联系客服\n\n关于手机号信息：\n- 仅用于用户身份验证\n- 不会用于营销推广\n- 严格加密存储',
        showCancel: false,
        confirmText: '我知道了'
      });
    },
    
    goBack() {
      // 返回上一页
      console.log('执行返回事件');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success() {
            console.log('返回成功');
          },
          fail(err) {
            console.error('返回失败', err);
            // 如果返回失败，尝试切换到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        });
      }, 500);
    }
  }
}
</script>

<style>
page {
  height: 100%;
  width: 100%;
}

.login-container {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 背景图层 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 半透明遮罩层 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 48, 73, 0.6); /* 深蓝色半透明遮罩 */
  z-index: 2;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 50px;
  left: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

/* 内容层 */
.content-layer {
  position: relative;
  z-index: 3;
  width: 85%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -100px; /* 整体上移100像素 */
}

/* 标题区域 */
.login-title {
  text-align: center;
  margin-bottom: 200px;
}

/* 主标题样式 */
.main-title {
  color: #ffffff;
  font-size: 54px;
  font-weight: 600;
  line-height: 70px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 副标题样式 */
.subtitle-text {
  color: #ffffff;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  display: block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 提示弹窗 */
.toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 999;
  font-size: 14px;
}

/* 授权登录区域 */
.auth-login-area {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-login-btn {
  cursor: pointer;
  width: 296px;
  height: 48px;
  padding: 0px 0px;
  border: 0;
  box-sizing: border-box;
  border-radius: 16px;
  background-color: #007AFF; /* iOS蓝色 */
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative; /* 用于定位加载动画 */
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.auth-login-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-login-btn:active:not(.loading):not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.auth-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-text {
  font-size: 20px;
}

.login-text {
  flex-grow: 1;
  text-align: center;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 授权说明样式 */
.auth-tips {
  width: 100%;
  margin-top: 15px;
  padding: 0 20px;
  text-align: center;
}

.tips-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.agreement-area {
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.agreement-checkbox:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background-color: rgba(255,255,255,0);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.checkbox.checked {
  background-color: #007AFF; /* 勾选后的背景色 */
  border-color: #007AFF;
  transform: scale(1.05);
}

.check-icon {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

.agreement-text {
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  text-align: left;
}

.link-text {
  color: #007AFF; /* 链接颜色 */
  text-decoration: underline;
  font-weight: 500;
}
</style>

